<template>
    <div class="h-full p-4 flex flex-col login_bg" :style="{ background:'url('+bgImg+')','backgroundImage': 'no-repeat' }">
        <div class="w-full h-full flex justify-center items-center p-5">
            <a-form ref="formRef" :layout="state.layout" :model="formData" style="width:460px;padding:60px 40px 40px 40px;background: rgba(255,255,255,1);border-radius: 10px; box-shadow: 0 0 15px #999;" v-if="!state.store.token">
                <div class="grid grid-cols-1 gap-2">
                    <a-form-item label="" name="phone" :rules="[{ required: true, message: '请填写手机号',pattern:prototype.$pattern.phone }]">
                        <d-input placeholder="手机号" v-model:value="formData.phone" />
                    </a-form-item>
                    <a-form-item label="" name="loginPwd" :rules="[{ required: true, message: '请填写密码' }]">
                        <formPsd placeholder="密码" v-model:value="formData.loginPwd" />
                    </a-form-item>
                    <a-button class="mt-2" size="large" type="primary" @click="onSubmit">登录</a-button>
                </div>
            </a-form>
        </div>
    </div>
</template>

<script setup>
import { browserLogin } from "../../javascript/request/dingtalk";
import bgImg from "@/assets/images/login_bg.png";
let state = reactive({
    formRef: undefined,
    layout: "horizontal",
    formData: {},
});
// if (window.state.store.token) {
//     window.prototype.$router.replace("/");
// }
//提交
const onSubmit = () => {
    state.formRef.validateFields().then((values) => {
        browserLogin(values).then((res) => {
            window.prototype.$router.replace("/");
        });
    });
};

const { formData, formRef } = toRefs(state);
const { prototype } = toRefs(window);
</script>